import React, { Component } from 'react';
import {
	ScrollView, StyleSheet, Text, View, PixelRatio, TouchableOpacity, Alert, Image, TextInput, Modal, Platform
} from "react-native";
import ValidateDataUtil from '../utils/ValidateDataUtil';
import { GLOBAL } from '../config/global';
import { style } from '../theme/style';

const scale = GLOBAL.SCALE;
const scan = require('../imgs/store/scan.png');
const arrow = require('../imgs/arrowBlue.png');
const modadlClose = require('../imgs/store/modadlClose.png');
const minus = require('../imgs/store/minus.png');
const add = require('../imgs/store/add.png');

/**
 * leftText rightText onPress
 * @param {object} props 
 */
export function MoreRow (props) {
	const { leftText, rightText, onPress } = props;
	return (
		<TouchableOpacity style={styles.moreRow} onPress={onPress} activeOpacity={0.5}>
			<Text style={styles.moreRowLeftText}>{leftText}</Text>
			<Text style={styles.grayText}>{rightText}</Text>
		</TouchableOpacity>
	);
}

/**
 * props.rowDataList {Array} label,val,textLarge{boolean}
 * @param {object} props 
 */
export function StorePane (props) {
	const { rowDataList } = props;
	const rows = rowDataList.map((item) => {
		const { label, val, textLarge } = item;
		const textLargeStyle = textLarge ? styles.textLarge : null;
		return (
			<View style={styles.row}>
				<Text style={styles.grayText}>{label}</Text>
				<Text style={[styles.text, textLargeStyle]}>{val}</Text>
			</View>
		);
	});
	return (
		<View style={styles.storePane}>{rows}</View>
	);
}

export function LargeBtn (props) {
	const { cellStyles, onPress, text } = props;
	return (
		<View style={[styles.bottomBtnCell, cellStyles, { marginBottom: GLOBAL.IS_IPHONEX ? 32 * scale : 20 }]}>
			<TouchableOpacity style={styles.bottomBtn} onPress={onPress} activeOpacity={0.5} >
				<Text style={styles.bottomBtnText}>{text}</Text>
			</TouchableOpacity>
		</View>
	);
}

export class ScanTop extends Component {

	constructor(props) {
		super(props);
		this.state = {
			noticeId: ''
		}
	}

	render () {
		const { doSearch, doScan } = this.props;
		const scanTopAndroid = (Platform.OS === 'android') ? styles.scanTopAndroid : null;
		return (
			<View style={[styles.scanTop, scanTopAndroid]}>
				<View style={styles.scanTopHead}></View>
				<View style={[styles.pane, { top: -44 * scale }]}>
					<View style={styles.content}>
						<View style={styles.numberCell}>
							<TextInput
								style={styles.numberCellInput}
								underlineColorAndroid='transparent'
								placeholder={"请输入出库单号"}
								placeholderTextColor="#999"
								maxLength={30}
								editable={true}
								keyboardType="numeric"
								onChangeText={(txt) => {
									const newTxt = ValidateDataUtil.removeChinese(txt);
									this.setState({ noticeId: newTxt })
								}}
							/>
							<TouchableOpacity onPress={() => {
								this.props.doScan();
							}} activeOpacity={1} style={styles.scanPress}>
								<Image source={scan} style={styles.scanPressPic} />
							</TouchableOpacity>
						</View>
						<LargeBtn text={'确定'} onPress={
							() => {

								const { noticeId } = this.state;
								if (ValidateDataUtil.isEmpty(noticeId)) {
									Alert.alert('请输入出库单号');
								} else {
									doSearch(noticeId);
								}

							}
						} cellStyles={{}} />
					</View>
				</View>
			</View>
		);
	}
}

/**
 * statusText{Sring} identifierText{Sring}
 * @param {object} props 
 */
export function PaneHead (props) {
	const { identifierText, statusText } = props;
	return (
		<View style={styles.identifierCell}>
			<Text style={styles.identifierText}>{identifierText}</Text>
			<Text style={styles.statusText}>{statusText}</Text>
		</View>
	);
}

/**
 * linkText{Sring} title{Sring}
 * @param {object} props 
 */
export function PaneHeadLine (props) {
	const { title, linkText, addPress } = props;
	return (
		<View style={[styles.identifierCell, styles.paneHeadLine]}>
			<Text style={styles.paneHeadLineTitle}>{title}</Text>
			<Text style={styles.paneHeadLineLinkText} onPress={addPress}>{linkText}</Text>
		</View>
	);
}

/**
 * 出入库|详细|顶部
 * @param {object} props 
 */
export function DetailTop (props) {
	const { stockInfo, onPress } = props;
	const { contractId, status, inoutStockType, deliveryType, companyName } = stockInfo;
	return (
		<View style={styles.detailTopView}>
			<View style={styles.detailTopThemeColorView}>
			</View>
			<TouchableOpacity activeOpacity={1} onPress={onPress} style={[styles.pane, styles.detailTopPane]}>
				<View style={[styles.row, styles.detailTopTitleView]}>
					<Text style={styles.detailTopTitleText}>订单编号：{contractId}</Text>
				</View>
				<View style={styles.row}>
					<View style={{ flex: 1, }}><Text style={styles.text}>入库类型：{inoutStockType}</Text></View>
					<View style={{ flex: 1, }}><Text style={styles.text}>交货方式：{deliveryType}</Text></View>
				</View>
				<View style={styles.row}>
					<View style={{ flex: 3, }}><Text style={styles.text}>供应商：{companyName}</Text></View>
					<View style={styles.statusCell}>
						<Text style={styles.detailTopStatusText}>{status}</Text>
						<Image source={arrow} style={''} />
					</View>
				</View>
			</TouchableOpacity>
		</View>
	);
}

/**
 * 
 * @param {object} props 
 * onClosePress,title,rowDataList[{label,val}],modalVisible
 */
export function LightBox (props) {
	const { onClosePress, title, rowDataList, modalVisible, lightBoxRowLabelStyle, textStyle, lightBoxRowStyle, lightBoxTitleStyle } = props;
	let rowViews = null;
	if (rowDataList && rowDataList.length) {
		rowViews = rowDataList.map((item, i) => {
			const { label, val } = item;
			if (val) {
				console.log(val.length);
			}

			return (
				<View style={[styles.lightBoxRowOne, lightBoxRowStyle]} key={i}>
					<Text style={[styles.lightBoxRowLabel, lightBoxRowLabelStyle]}>{label}</Text>
					<Text style={[styles.text, textStyle]} numberOfLines={5}>{val}</Text>
				</View>
			);
		})
	}
	return (
		<Modal animationType={"fade"}
			transparent={true}
			visible={modalVisible}
			onRequestClose={() => { }}>
			<View style={styles.modalBg}>
				<View style={styles.lightBox}>
					<View style={[styles.lightBoxTitle, lightBoxTitleStyle]}>
						<Text style={styles.lightBoxTitleText}>{title}</Text>
					</View>
					{rowViews}
				</View>
				<TouchableOpacity onPress={onClosePress} style={styles.lightBoxClose} activeOpacity={1}>
					<Image source={modadlClose} style={styles.lightBoxClosePic} />
				</TouchableOpacity>
			</View>
		</Modal>
	);
}

export function StateLightBox (props) {
	const { onClosePress, title, rowDataList, modalVisible, lightBoxRowLabelStyle, textStyle, lightBoxRowStyle,
		lightBoxTitleStyle } = props;
	const finishIcon = require('../imgs/global/finishIcon.png');//蓝色
	const waitIcon = require('../imgs/global/waitIcon.png');//灰色
	const successIcon = require('../imgs/store/success.png');//勾
	const failIcon = require('../imgs/store/fail.png');//叉

	return (
		<Modal animationType={"fade"}
			transparent={true}
			visible={modalVisible}
			onRequestClose={() => { }}>
			<View style={[styles.modalBg, { height: '100%', paddingTop: '20%' }]}>
				<View style={styles.lightBox} >
					<View style={[styles.lightBoxTitle, lightBoxTitleStyle]}>
						<Text style={styles.lightBoxTitleText}>{title}</Text>
					</View>
					<ScrollView>
						{
							rowDataList && rowDataList.length > 0 ?
								rowDataList.map((item, index) => {
									let nextIndex = index - 1;
									let nextItem = index != rowDataList.length - 1 ? rowDataList[nextIndex] || {} : {};
									let heightCss = item.remark  ? { flexDirection: 'column', flexWrap: 'wrap' } : { flexDirection: 'column', flexWrap: 'wrap', height: 18 * scale };
									let stateBorder = (item.remark || nextItem.remark) ? [styles.stateBorderRemark, {
										height: ((item.remark ? item.remark.length : 0) / 16) > 1 ? (Math.ceil((item.remark ? item.remark.length : 0) / 16) * 15 + 50) * scale : 65 * scale
									}] : styles.stateBorder;
									let stateBorderColor = { borderLeftColor: (item.logId ? style.color.themeColor : '#EAEAEA') };
									return (
										<View style={styles.lightViewRow} key={index}>
											<View style={[styles.lightBoxRow, lightBoxRowStyle]}>
												{
													//侧边的边框
													index === rowDataList.length - 1 ? null :
														<View style={[stateBorder, stateBorderColor, { height: '100%' }]}></View>
												}
												<View style={{ width: 240 * scale, paddingBottom: 10 * scale }}>
													<View style={{ flexDirection: 'row', }}>
														<Image source={item.logId ? finishIcon : waitIcon}></Image>
														<Text style={[styles.text, textStyle,]}>{item.taskName}{item.auditStaffName ? (':' + item.auditStaffName) : ''}</Text>
														{item.auditResult == '0' ? <Image source={failIcon}></Image> : item.auditResult === 1 ? <Image source={successIcon}></Image> : null}
													</View>
													<View style={heightCss}>
														{item.auditTime ? <Text style={[styles.text, textStyle, { fontSize: 12 * scale, color: '#8B8B8B', paddingLeft: 18 * scale }]} numberOfLines={5}>{item.auditTime}{item.units || ''}</Text> : null}
														{item.remark&&(item.auditResult=='0'||item.auditResult=='1') ? <Text style={[styles.text, textStyle, { fontSize: 12 * scale, color: '#8B8B8B', paddingRight: 5 * scale, paddingLeft: 18 * scale }]} >审批意见</Text> : null}
														{item.remark&&(item.auditResult=='0'||item.auditResult=='1')  ? <Text style={[styles.text, textStyle, { fontSize: 12 * scale, color: '#8B8B8B', paddingRight: 5 * scale, paddingLeft: 18 * scale }]} >{item.remark}</Text> : null}
													</View>
												</View>
											</View>
										</View>
									)
								})
								: null
						}
					</ScrollView>
				</View>
				<TouchableOpacity onPress={onClosePress} style={styles.lightBoxClose} activeOpacity={1}>
					<Image source={modadlClose} style={styles.lightBoxClosePic} />
				</TouchableOpacity>
			</View>

		</Modal >
	);
}
export function StatusModel (props) {
	const { onClosePress, title, rowDataList, modalVisible, lightBoxRowLabelStyle, textStyle, lightBoxRowStyle,
		lightBoxTitleStyle } = props;
	const finishIcon = require('../imgs/global/finishIcon.png');//蓝色
	const waitIcon = require('../imgs/global/waitIcon.png');//灰色
	const successIcon = require('../imgs/store/success.png');//勾
	const failIcon = require('../imgs/store/fail.png');//叉

	return (
		<Modal animationType={"fade"}
			transparent={true}
			visible={modalVisible}
			onRequestClose={() => { }}>
			<View style={[styles.modalBg, { height: '100%', paddingTop: '20%' }]}>
				<View style={styles.lightBox} >
					<View style={[styles.lightBoxTitle, lightBoxTitleStyle]}>
						<Text style={styles.lightBoxTitleText}>{title}</Text>
					</View>
					<ScrollView>
						{
							rowDataList && rowDataList.length > 0 ?
								rowDataList.map((item, index) => {
									let nextIndex = index - 1;
									let nextItem = index != rowDataList.length - 1 ? rowDataList[nextIndex] || {} : {};
									let heightCss = item.remark && item.auditResult == '0' ? { flexDirection: 'column', flexWrap: 'wrap' } : { flexDirection: 'column', flexWrap: 'wrap', height: 18 * scale };
									let stateBorder = (item.remark || nextItem.remark) ? [styles.stateBorderRemark, {
										height: ((item.remark ? item.remark.length : 0) / 16) > 1 ? (Math.ceil((item.remark ? item.remark.length : 0) / 16) * 15 + 50) * scale : 65 * scale
									}] : styles.stateBorder;
									let stateBorderColor = { borderLeftColor: (item.logId ? style.color.themeColor : '#EAEAEA') };
									return (
										<View style={[styles.lightViewRow, {
											paddingBottom: 10 * scale,
										}]} key={index}>
											<View style={[styles.lightBoxRow, lightBoxRowStyle]}>
												{
													//侧边的边框
													index === rowDataList.length - 1 ? null :
														<View style={[stateBorder, stateBorderColor]}></View>
												}
												<View style={{ width: 240 * scale }}>
													<View style={{ flexDirection: 'row', }}>
														<Image source={item.logId ? finishIcon : waitIcon}></Image>
														<Text style={[styles.text, textStyle,]} numberOfLines={1}>{item.taskName}{item.auditStaffName ? (':' + item.auditStaffName) : ''}</Text>
														{item.auditResult != '1' ? <Image source={failIcon}></Image> : item.auditResult === 1 ? <Image source={successIcon}></Image> : null}
													</View>
													<View style={heightCss}>
														{item.auditTime ? <Text style={[styles.text, textStyle, { fontSize: 12 * scale, color: '#8B8B8B', paddingLeft: 18 * scale }]} numberOfLines={5}>{item.auditTime}{item.units || ''}</Text> : null}
														{item.remark && item.auditResult != '1' ? <Text style={[styles.text, textStyle, { fontSize: 12 * scale, color: '#8B8B8B', paddingRight: 5 * scale, paddingLeft: 18 * scale }]} >审批驳回: </Text> : null}
														{item.remark && item.auditResult != '1' ? <Text style={[styles.text, textStyle, { fontSize: 12 * scale, color: '#8B8B8B', paddingRight: 5 * scale, paddingLeft: 18 * scale }]} >{item.remark||"审批驳回"}</Text> : null}
													</View>
												</View>
											</View>
										</View>
									)
								})
								: null
						}
					</ScrollView>
				</View>
				<TouchableOpacity onPress={onClosePress} style={styles.lightBoxClose} activeOpacity={1}>
					<Image source={modadlClose} style={styles.lightBoxClosePic} />
				</TouchableOpacity>
			</View>

		</Modal >
	);
}

export function ReceiveLightBox (props) {
	const { onClosePress, title, rowDataList, modalVisible, lightBoxRowLabelStyle, textStyle, lightBoxRowStyle,
		lightBoxTitleStyle } = props;
	let shouSum = 0;
	return (
		<Modal animationType={"fade"}
			transparent={true}
			visible={modalVisible}
			onRequestClose={() => { }}>
			<TouchableOpacity onPress={onClosePress} style={styles.modalBg} activeOpacity={1}>
				<View style={styles.lightBox} >
					<View style={[styles.lightBoxTitle, lightBoxTitleStyle]}>
						<Text style={styles.lightBoxTitleText}>{title}</Text>
					</View>
					{
						rowDataList && rowDataList.length > 0 ?
							rowDataList.map((item, index) => {
								let { name, weight, weightName, data } = item;
								return (
									<View>
										<View style={[styles.receiveView]} key={index}>
											<Text style={[styles.receiveTextLeft]}>{name}</Text>
											<Text style={[styles.receiveTextRight]}>总量{weight}{weightName}</Text>
										</View>
										<View style={[styles.issueView, data && data.length > 0 ? null : styles.viewDisplay]} key={'issue' + index}>
											{data && data.length > 0 ? data.map((myitem, myindex) => {
												let { time, fahuo, shouhuo } = myitem;
												shouSum += shouhuo * 1;
												return (
													<View>
														<View style={{ flexDirection: 'row', marginTop: 8 * scale, }}>
															<Text style={[styles.issueText,]}>收货日期:{time}</Text>
															<Text style={[styles.issueText,]}>实发数量:{fahuo}{weightName}</Text>
														</View>
														<View style={[{ flexDirection: 'row', marginTop: 6 * scale, }]}>
															<Text style={{ fontSize: 12 * scale, marginLeft: 10 * scale, paddingTop: -6 * scale, }}>实收数量:</Text><Text style={{ fontSize: 12 * scale, color: '#2F7BFF', paddingTop: -6 * scale, }}>{shouhuo}{weightName}</Text>
														</View>
													</View>
												)

											})
												: null
											}
										</View>
										<View style={{ width: 270 * scale, marginLeft: 14 * scale, marginTop: 8 * scale, marginBottom: 14 * scale, backgroundColor: '#E4E4E4', height: 0.5 * scale, }}></View>
									</View>
								)
							})
							: null
					}
					{rowDataList && rowDataList.length > 0 ? <View style={{ marginLeft: 19 * scale, flexDirection: 'row' }}>
						<Text style={{ fontSize: 12 * scale }}>已收货</Text><Text style={{ fontSize: 12 * scale, color: '#2F7BFF' }}>{shouSum}吨</Text>
					</View> : null}
				</View>
			</TouchableOpacity>
		</Modal >
	);
}


export function PriceLightBox (props) {
	const { onClosePress, title, rowDataList, modalVisible, lightBoxRowLabelStyle, textStyle, lightBoxRowStyle,
		lightBoxTitleStyle } = props;
	return (
		<Modal animationType={"fade"}
			transparent={true}
			visible={modalVisible}
			onRequestClose={() => { }}>
			<TouchableOpacity onPress={onClosePress} style={styles.modalBg} activeOpacity={1}>
				<View style={styles.lightBox} >
					<View style={[styles.lightBoxTitle, lightBoxTitleStyle]}>
						<Text style={styles.lightBoxTitleText}>{title}</Text>
					</View>
					{
						rowDataList && rowDataList.length > 0 ?
							rowDataList.map((item, i) => {
								const { label, val, viewStyle, leftStyle, rightStyle } = item;
								return (
									<View>
										<View style={[styles.lightBoxRow, lightBoxRowStyle, viewStyle]} key={i}>
											<Text style={[styles.lightBoxRowLabel, lightBoxRowLabelStyle, leftStyle]}>{label}</Text>
											<Text style={[styles.text, textStyle, rightStyle, { paddingRight: 12 * scale }]} numberOfLines={5}>{val}</Text>
										</View>
									</View>
								)
							})
							: null
					}

				</View>
			</TouchableOpacity>
		</Modal >
	);
}
/**
 *
* @param {object} props
		* onCancelPress,title,onSubmitPress,modalVisible,quantity
		*/
export class QuantityBoxModal extends Component {
	constructor(props) {
		super(props);
		this.state = {
			// quantity: props.quantity,
			toggle: false
		}
		this.quantity = null;
	}

	componentWillMount () {

	}

	componentWillUpdate () {
		let { quantity } = this.props;
		if (quantity == null) {
			this.quantity = null;
		}
	}

	render () {
		let { quantity } = this.props;
		console.log(this.quantity);
		if (this.quantity == null) {
			this.quantity = quantity;
		}

		const { onCancelPress, title, onSubmitPress, modalVisible } = this.props;

		return (
			<Modal animationType={"fade"}
				transparent={true}
				visible={modalVisible}
				onRequestClose={() => { }}>
				<View style={styles.quantityBoxModal}>
					<View style={styles.quantityBox}>
						<View style={styles.quantityBoxTop}>
							<Text style={styles.quantityBoxTopText}>{title}</Text>
						</View>
						<View style={styles.quantityWrap}>
							<TouchableOpacity style={styles.minus} onPress={this._countQuantity.bind(this, 'minus')} activeOpacity={0.5} >
								<Image source={minus} style={styles.cover} /></TouchableOpacity>
							{/* <View style={styles.curQuantityCell}>
								<Text style={styles.textQuantity}>{this.quantity}</Text>
							</View> */}
							<TextInput
								ref="quantityInput"
								style={styles.curQuantityInput}
								underlineColorAndroid='transparent'
								placeholder={"请输入"}
								placeholderTextColor="#999"
								maxLength={100}
								// defaultValue={quantity1}
								// editable={true}
								value={`${this.quantity}`}
								keyboardType="numeric"
								onChangeText={(txt) => {
									this.quantity = txt

									// const quantity = txt.length ? Number(txt) : 0;
									this.setState({
										toggle: !this.state.toggle
									})
								}}
							/>

							<TouchableOpacity style={styles.minus} onPress={this._countQuantity.bind(this, 'add')} activeOpacity={0.5} >
								<Image source={add} style={styles.cover} /></TouchableOpacity>
						</View>
						<View style={styles.quantityBoxBtnCell}>
							<TouchableOpacity activeOpacity={0.5} style={[styles.quantityBoxBtn, {
								borderRightColor: '#e4e4e4',
								borderRightWidth: 1 / PixelRatio.get(),
							}]} onPress={() => {
								this.quantity = quantity;
								onCancelPress();
							}} >
								<Text style={[styles.text, styles.textSuccess]}>取消</Text>
							</TouchableOpacity>
							<TouchableOpacity activeOpacity={0.5} style={styles.quantityBoxBtn} onPress={() => {
								// const quantity = this.quantity;
								// this.quantity = null;
								onSubmitPress(this.quantity);
							}} >
								<Text style={[styles.text, styles.textSuccess]}>确定</Text>
							</TouchableOpacity>
						</View>
					</View>
				</View>
			</Modal>);
	}

	_countQuantity (type) {
		let quantity = this.quantity;
		if (!quantity) {
			quantity = this.props.quantity;
			console.log(quantity);
		}
		if (type == 'minus') {
			if (quantity > 0) {
				quantity--;
			}
		} else if (type == 'add') {
			quantity++;
		}
		this.quantity = quantity;
		this.setState({
			toggle: !this.state.toggle
		});
	}

}


const styles = StyleSheet.create({
	quantityBoxModal: {
		width: 375 * scale,
		height: GLOBAL.SCREEN_HEIGHT,
		backgroundColor: 'rgba(0, 0, 0, .3)',
		alignItems: 'center',
		justifyContent: 'center',
	},
	quantityBox: {
		width: 271 * scale,
		height: 168 * scale,
		backgroundColor: '#fff',
		borderRadius: 13,
		alignItems: 'center',
		position: 'relative',
	},
	quantityBoxBtnCell: {
		flexDirection: 'row',
		height: 40 * scale,
		width: 271 * scale,
		borderTopColor: '#e4e4e4',
		borderTopWidth: 1 / PixelRatio.get(),
		position: 'absolute',
		bottom: 0,
	},
	quantityBoxBtn: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
	},
	quantityBoxTop: {
		height: 66 * scale,
		justifyContent: 'center',
		alignItems: 'center',
	},
	quantityBoxTopText: {
		fontSize: 16 * scale,
		color: '#404040',
	},
	minusCell: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	minus: {
		width: 30 * scale,
		height: 30 * scale,
	},
	cover: {
		width: '100%',
		height: '100%',
	},
	curQuantityInput: {
		borderColor: '#e4e4e4',
		borderWidth: 1 / PixelRatio.get(),
		width: 100 * scale,
		height: 30 * scale,
		fontSize: 18 * scale,
		color: '#4B4B4B',
		padding: 0,
	},
	curQuantityCell: {
		borderColor: '#e4e4e4',
		borderWidth: 1 / PixelRatio.get(),
		width: 100 * scale,
		height: 30 * scale,
		justifyContent: 'center',
		alignItems: 'center',
	},
	editRow: {
		backgroundColor: '#fff',
		paddingBottom: 16 * scale,
		marginBottom: 12 * scale,
	},
	quantityLabel: {
		flex: 1,
	},
	quantityCell: {
		width: 172 * scale,
		flexDirection: 'row',
		justifyContent: 'space-between',
	},
	quantityWrap: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		width: 172 * scale,
		height: 30 * scale,
	},
	lightBoxClose: {
		width: 44 * scale,
		height: 44 * scale,
		marginTop: 28 * scale,
	},
	lightBoxClosePic: {
		width: '100%',
		height: '100%',
	},
	lightBox: {
		backgroundColor: '#fff',
		paddingTop: 14 * scale,
		paddingBottom: 11 * scale,
		borderRadius: 13,
		width: 298 * scale,
	},
	lightBoxRow: {
		width: 298 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		//marginLeft: 12 * scale,
		//marginBottom: 8 * scale,
	},
	lightBoxRowOne: {
		width: 298 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		marginBottom: 8 * scale,
	},
	lightViewRow: {
		width: 298 * scale,
		marginBottom: 10 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 17 * scale,
	},
	lightBoxRowLabel: {
		// flex: 2,
		color: '#8B8B8B',
		fontSize: 13 * scale,
	},
	lightBoxRowVal: {
		color: '#000',
		fontSize: 13 * scale,
	},
	lightBoxTitle: {
		marginBottom: 17 * scale,
		alignItems: 'center',
		// justifyContent: 'center'
	},
	lightBoxTitleText: {
		color: '#404040',
		fontSize: 18 * scale,
		// marginBottom: 7 * scale,
	},
	modalBg: {
		width: 375 * scale,
		height: GLOBAL.SCREEN_HEIGHT,
		backgroundColor: 'rgba(0, 0, 0, .6)',
		justifyContent: 'center',
		alignItems: 'center',
	},
	statusCell: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'flex-end',
		alignItems: 'center',
	},
	detailTopView: {
		width: 375 * scale,
		height: 117 * scale,
		alignItems: 'center',
		backgroundColor: '#F5F5F5',
	},
	detailTopThemeColorView: {
		width: 375 * scale,
		height: 60 * scale,
		backgroundColor: style.color.themeColor,
	},
	detailTopPane: {
		top: -48 * scale,
	},
	detailTopTitleView: {
		paddingLeft: 10 * scale,
		borderLeftColor: style.color.themeColor,
		borderLeftWidth: 2,
	},
	detailTopTitleText: {
		fontSize: 14 * scale,
		color: '#222'
	},
	detailTopStatusText: {
		fontSize: 14 * scale,
		marginRight: 6 * scale,
		color: style.color.themeColor,
	},
	paneHeadLine: {
		borderBottomColor: '#e4e4e4',
		borderBottomWidth: 1 / PixelRatio.get(),
		paddingBottom: 12 * scale,
	},
	paneHeadLineTitle: {
		fontSize: 13 * scale,
		color: '#222222'
	},
	paneHeadLineLinkText: {
		fontSize: 12 * scale,
		color: '#8B8B8B'
	},
	identifierCell: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	identifierText: {
		fontSize: 14 * scale,
		color: '#4B4B4B',
	},
	statusText: {
		fontSize: 12 * scale,
		color: '#31B0FC',
	},
	bottomBtnCell: {
		justifyContent: 'center',
		alignItems: 'center',
		width: '100%',
		height: 60 * scale,
	},
	bottomBtn: {
		width: 327 * scale,
		height: 44 * scale,
		backgroundColor: style.color.themeColor,
		justifyContent: 'center',
		alignItems: 'center',
		borderRadius: 40,
	},
	bottomBtnText: {
		fontSize: 16 * scale,
		color: '#fff'
	},
	scanPress: {
		width: 24 * scale,
		height: 22 * scale,
	},
	scanPressPic: {
		width: '100%',
		height: '100%',
	},
	pane: {
		width: 351 * scale,
		marginBottom: 12 * scale,
		paddingTop: 12 * scale,
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		backgroundColor: '#fff',
		borderRadius: 8,
		shadowColor: '#D2D2D2',
		shadowOffset: { width: 0, height: 2 * scale },
		shadowRadius: 4 * scale,
		shadowOpacity: 0.5,
	},
	content: {
		width: 327 * scale,
	},
	numberCellInput: {
		flex: 1,
		fontSize: 14 * scale,
	},
	numberCell: {
		flexDirection: 'row',
		height: 41 * scale,
		paddingLeft: 23 * scale,
		paddingRight: 13 * scale,
		alignItems: 'center',
		backgroundColor: '#EFF2F2',
		borderRadius: 4 * scale,
	},
	scanTop: {
		width: 375 * scale,
		alignItems: 'center',
		height: 130 * scale,
	},
	scanTopAndroid: {
		height: 142 * scale,
	},
	scanTopHead: {
		width: 375 * scale,
		backgroundColor: style.color.themeColor,
		height: 53 * scale,
	},
	row: {
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 12 * scale,
	},
	storePane: {
		backgroundColor: '#EFF2F2',
		borderRadius: 4,
		width: 327 * scale,
		paddingTop: 18 * scale,
		paddingLeft: 18 * scale,
		marginTop: 12 * scale,
	},
	moreRowLeftText: {
		fontSize: 16 * scale,
		color: '#202020'
	},
	grayText: {
		fontSize: 13 * scale,
		color: '#8B8B8B'
	},
	textQuantity: {
		fontSize: 18 * scale,
		color: '#4B4B4B'
	},
	textLarge: {
		fontSize: 20 * scale,
		color: '#404040'
	},
	text: {
		fontSize: 13 * scale,
		color: '#404040',
		flex: 3,
		flexWrap: 'wrap'
	},
	textSuccess: {
		color: style.color.themeColor,
	},
	moreRow: {
		width: 325 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		height: 40 * scale,
	},
	/**发货信息样式 */
	receiveView: {
		flexDirection: 'row',
		marginLeft: 19 * scale,
	}, receiveTextLeft: {
		fontSize: 12 * scale,
		width: 84 * scale,
		color: '#404040'
	}, receiveTextRight: {
		fontSize: 12 * scale,
		color: '#404040'
	}, issueView: {
		width: 270 * scale,
		backgroundColor: '#F3F3F3',
		borderRadius: 4 * scale,
		marginLeft: 14 * scale,
		marginTop: 10 * scale,
		marginBottom: 8 * scale,
		paddingBottom: 8 * scale,
	}, issueText: {
		width: 125 * scale,
		fontSize: 12 * scale,
		paddingLeft: 10 * scale,
	}, issueBot: {
		marginBottom: 9 * scale
	},
	stateBorder: {
		borderLeftWidth: 4 * scale,
		borderLeftColor: style.color.gray,
		height: 45 * scale,
		position: 'absolute',
		top: 15 * scale,
		left: 7 * scale,
	}, viewDisplay: {
		display: 'none'
	}, stateBorderRemark: {
		borderLeftWidth: 4 * scale,
		borderLeftColor: style.color.gray,
		// height: 80 * scale,
		position: 'absolute',
		top: 16 * scale,
		left: 7 * scale,
	}
});